<template>

  <div class="layout-container">
    <header class="header">
      <h1>新闻浏览</h1>
      <div v-if="loginStore.token" class="user">
        <el-dropdown>
          <span class="el-dropdown-link">
      欢迎，{{ loginStore.username }}<el-icon class="el-icon--right"><arrow-down/></el-icon></span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="toHomepage">进入管理</el-dropdown-item>
              <el-dropdown-item @click="logoutHandler">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <el-button v-else type="text" @click="toLogin">登录</el-button>
    </header>
    <main class="home-content">
      <h3>最新资讯</h3>
      <el-skeleton v-if="loading" row-count="5" :loading="loading" style="width: 100%"></el-skeleton>
      <div class="news-list" v-else>
        <div class="news-item" v-for="news in newsList" :key="news.id">
          <h4 class="news-title">{{ news.title }}</h4>
          <p class="news-content">
            {{ news.content.length > 150 ? news.content.substring(0, 150) + '...' : news.content }}
          </p>
          <div class="news-meta">
            <span>发布时间: {{ formatTime(news.publishTime) }}</span>
            <span>发布者ID: {{ news.id }}</span>
          </div>
        </div>
        <div class="no-data" v-if="newsList.length === 0">
          暂无新闻数据
        </div>
      </div>
    </main>

  </div>

</template>
<script setup>


import {useRouter} from 'vue-router';
import {useLoginStore} from '../stores/loginStore.js';
import {ElMessage} from 'element-plus';
import {ArrowDown} from '@element-plus/icons-vue'
import api from "@/api/index.js";
import { ref, onMounted } from 'vue';
const router = useRouter();
const loginStore = useLoginStore();
import {formatTime} from "@/utils/date.js"

const toLogin = () => {
  router.push("/login");
};

const toHomepage = () => {
  if (loginStore.token) {
    const routeLocation = router.resolve('/LayoutLoginafter');
    window.open(routeLocation.href, '_blank');
  } else {
    ElMessage({
      message: "请先登录",
      type: 'warning',
    });
    router.push("/login");
  }
};
const logoutHandler = () => {
  // loginStore.token = ""
  // loginStore.status = ""
  // loginStore.username = ""
  // loginStore.password = ""
  loginStore.$reset()
  router.push("/LayoutLoginafter")

}

const newsList = ref([]);
const loading = ref(true);

// 页面加载时获取新闻列表
onMounted(async () => {
  try {
    api.getNewsList().then(res => {
      console.log(res)
      console.log(res.data)
      newsList.value = res.data
    }).catch(error)
    {
      ElMessage({
        message: "获取新闻失败，请稍后再试",
        type: 'error',
      });
      console.error("获取新闻失败:", error);
    }
  } finally {
    loading.value = false;
  }
});



</script>


<style scoped>

.layout-container {
  width: 100%;
  height: 100%;
}

.layout-container {
  height: 20px;
  display: flex;
  flex-direction: column;
}

.header {
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid #eee;
}

.user {
  font-size: 15px;
  float: right;
  margin-right: 40px;
  margin-top: 20px;
}

.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.home-content {
  flex: 1;
  padding: 20px 40px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  background-color: rgba(145, 145, 145, 0.75);
}

.home-content h3 {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f0f0f0;
}

.news-list {
  display: grid;
  gap: 20px;
}

.news-item {
  padding: 20px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s;
}

.news-item:hover {
  transform: translateY(-3px);
}

.news-title {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 1.2rem;
}

.news-content {
  margin: 0 0 15px 0;
  color: #666;
  line-height: 1.6;
}

.news-meta {
  display: flex;
  justify-content: space-between;
  color: #999;
  font-size: 0.9rem;
  padding-top: 10px;
  border-top: 1px dashed #eee;
}

.no-data {
  text-align: center;
  padding: 50px 0;
  color: #999;
  background-color: #fff;
  border-radius: 8px;
}

</style>